<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS网页布局</title>
    <link rel="stylesheet" type="text/css" href="10.15.css">
</head>
<body>
<!-- 头部 -->
<div class="header">
    <div class="logo">
        <img src="image/logo.png" alt="logo.png"></div>
    <div class="nav">
        <ul>
            <a href="">HOME</a>
            <a href="">ABOUT</a>
            <a href="">GALLERY</a>
            <a href="">FACULTY</a>
            <a href="">EVENTS</a>
            <a href="">CONTACT</a>
        </ul>
    </div>
</div>
<!--主体-->
<div class="main">
    <div class="top">
        div>
    <!-- 遮罩层 -->
    <div class="topLayer">

    </div>
    <!--div>
    <!--中间第一部分--> 上层的表单内容 -<img src="image/banner3.jpg">
    </->
    <tr>
        <td>
            <input type="text" class="input" placeholder="your Name">
        </td>
    </tr>
    <tr>    <div class="topLayer-top">
        <table class="tb">

            <input type="text" class="input" placeholder="your Phone">
            </td>
            </tr>
            <tr>
                <td>
                    <input type="text" class="input" placeholder="your Email">
                </td>
                <td>
            </tr>
            <tr><td><button class="button">SEND MESSAGE</button></td></tr>
        </table>
    <tr><td><textarea class="comment" placeholder="Write Your Comment Here"></textarea></td></tr>

</
    <div class="middle">
        <div class="headline">ABOUT</div>
        <div class="line"></div>
        <div class="m-middle">Lorem Ipsum is simple dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
        <div class="m-bottom">

            <div class="m-left">
                <div class="word1">A WORD ABOUT US</div>
                <div class="content">

                </div>
                <div class="word2">Praesent dignissim viverra est,sedbibendum ligula congue non.Sed ac nislet feils gravida commodo? Suspendisseeget ullamcorper ipsum.Suspendisse diam amet.</div>
                <button class="button">EXPLORE</button>
            </div>
            <div class="m-photo">
                <img src="image/bb3.jpg">
            </div>
            <div class="m-right">
                <div class="rectangle1">
                    <div class="number">70000</div>
                    <div class="border"></div>
                    <div class="type">Students</div>
                </div>
                <div class="rectangle2">
                    <div class="number">600</div>
                    <div class="border"></div>
                    <div class="type">Faculty</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 中间第二部分-->
    <div class="middle2">
        <div class="pic1">
            <img src="image/b1.jpg">
        </div>
        <div class="introduction1">
            <div class="title">Library</div>
            <div class="style1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
            <div class="style2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</div>
            <button class="btn">EXPLORE</button>
            <!--<input type="button" value="EXPLORE" class="btn">-->
        </div>
        <div class="pic2">
            <img src="image/b2.jpg">
        </div>
        <div class="introduction2">
            <div class="title">Computer Lab</div>
            <div class="style1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
            <div class="style2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</div>
            <button class="btn">EXPLORE</button>
        </div>
    </div>
    <div class="middle2">
        <div class="introduction3">
            <div class="title">Conference Hall</div>
            <div class="style1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
            <div class="style2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</div>
            <button class="btn">EXPLORE</button>
        </div>
        <div class="pic1">
            <img src="image/b3.jpg">
        </div>
        <div class="introduction4">
            <div class="title">Play Ground</div>
            <div class="style1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
            <div class="style2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</div>
            <button class="btn">EXPLORE</button>
        </div>
        <div class="pic2">
            <img src="image/b4.jpg">
        </div>
    </div>
    <!--中间第三部分-->
    <div class="middle3">
        <div class="headline">GALLERY</div>
        <div class="line"></div>
        <div class="m-middle">Lorem Ipsum is simple dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
    </div>
    <div class="bottom">
        <div class="total">
            <img src="image/03-01.jpg">
            <div class="bottomLayer">SCIENCE LAB</div>
        </div>
        <div class="total">
            <img src="image/03-02.jpg">
            <div class="bottomLayer">INDOOR STADIUM</div>
        </div>
        <div class="total">
            <img src="image/03-03.jpg">
            <div class="bottomLayer">TRANSPORTATION</div>
        </div>
        <div class="total">
            <img src="image/03-04.jpg">
            <div class="bottomLayer">KIDS ROOM</div>
        </div>
        <div class="total">
            <img src="image/03-05.jpg">
            <div class="bottomLayer">MEDITATION CLASSES</div>
        </div>
        <div class="total">
            <img src="image/03-06.jpg">
            <div class="bottomLayer">KIDS PLAY GROUND</div>
        </div>
    </div>
    <!--清除浮动-->
    <div class="clear"></div>
</div>
<!-- 底部 -->
<div class="footer">
    © 2016 imooc.com  京ICP备13046642号
</div>
</body>
</html>